<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keyup.enter="downFn"
      v-model="task"
    />
  </header>
</template>

<script>
export default {
  props: ['arr'],
  data () {
    return {
      task: ''//起的名字输入框
    }
  },
  methods: {
    // 键盘点击事件
    downFn () {
      if (this.task.trim().length === 0) {
        return alert('请输入内容')

      } else {
        // 传给父亲
        this.$emit('Chufa', this.task)
        this.task = ''//清空输入框
      }
    }

  },
  computed: {
    isAll: {
      set (val) {
        // true/false
        // 目标: 点击全选, 所有任务都完成
        // 直接改arr里对象是可以影响到所有地方的(对象有引用关系)
        // 但是违反了单向数据流思想(所有的操作都回到list数据源页面操作-数据留回来)
        this.$emit('isAllEv', val)
      },
      get () {
        return this.arr.every(obj => {
          obj.isDone === false

        })
      }
    }
  }


}
</script>